<template>
  <div class="login-content flex-center">
    <div class="login-back">
      <div class="title-box">
        <div class="title">
          <category-title title="登录" title-sub="login"/>
        </div>
      </div>
      <a-form
          :label-col="{ span: 4 }"
          :model="formState"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          labelAlign="left"
          name="basic"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            :rules="[{ required: true, message: '请输入用户名' }]"
            label="用户名"
            name="username"
        >
          <a-input v-model:value="formState.username"/>
        </a-form-item>

        <a-form-item
            :rules="[{ required: true, message: '请输入密码' }]"
            label="密码"
            name="password"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 0, span: 24 }" class="btn-item">
          <div class="flex-center">
            <a-button html-type="submit" type="primary">
              登录
            </a-button>
          </div>
        </a-form-item>
      </a-form>

      <!--      <a-button @click="onPageChange(10)">123</a-button>-->
    </div>
  </div>
</template>

<script setup>
import CategoryTitle from "@/components/customs/category-title/index.vue";
import {inject} from "vue";
import {reactive} from "@vue/reactivity";
import {AuthApi} from "@/configs/controller";
import {message} from "ant-design-vue";

const onPageChange = inject("pageChange");
const userInfo = inject("userInfo");
const isLoading = inject("isLoading");
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = async values => {
  console.log("Success:", values);
  isLoading.value = true;
  const api = new AuthApi();
  api.data(values);
  await api.send();
  const {data, error, msg} = await api.getDatas();

  if (error === 1) {
    console.log(data);
    isLoading.value = false;
    message.error(msg);
  } else {
    localStorage.setItem("token", `${data.token_type} ${data.access_token}`);
    userInfo.load();
    isLoading.value = false;
    onPageChange(-1);
  }

};
const onFinishFailed = errorInfo => {
  console.log("Failed:", errorInfo);
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
